import React from 'react'
import m from './main.module.scss'
class App extends React.Component {
    constructor() {
        super()
        this.state = {
            index: 0
        }
    }
    render() {
        return <div className={m.main}>
            <div className={m.img}>
                <img src="https://gw.alipayobjects.com/os/f/cms/images/jbdaq74v/3d6ea74b-a36d-4979-a13d-840d5c3a0d85.jpeg" alt="" />
                <div className={m.img_div1}>
                    <div>
                        <p>口碑系统服务商基础业务协作费结算规范（2020年1.0版）延期公告</p>
                        <p>口碑服务商公告</p>
                        <p>口碑系统服务商基础业务协作费结算规范（2020年1.0版）发布公告</p>
                        <a href="###">查看更多</a>
                    </div>
                </div>
                <div className={m.main1}>
                    <p className={m.main1_p}>合作方向</p>
                    <ul>
                        <li>
                            <div className={m.main1_li_div}>
                                <img src="https://gw.alipayobjects.com/zos/rmsportal/ENqrnyJypJyjWzWiWjyQ.png" alt="" />
                                <div>
                                    <h1>
                                        马上一条龙
                                    </h1>
                                    <span>
                                        通过口碑码帮商家提供流量，营销
                                    <br />
                                    服务等一条龙的解决方案
                                    </span>
                                </div>
                            </div>
                        </li>

                        <li>
                            <div className={m.main1_li_div}>
                                <img src="https://gw.alipayobjects.com/zos/rmsportal/ENqrnyJypJyjWzWiWjyQ.png" alt="" />
                                <div>
                                    <h1>
                                        马上一条龙
                                    </h1>
                                    <span>
                                        通过口碑码帮商家提供流量，营销
                                    <br />
                                    服务等一条龙的解决方案
                                    </span>
                                </div>
                            </div>
                        </li>

                        <li>
                            <div className={m.main1_li_div}>
                                <img src="https://gw.alipayobjects.com/zos/rmsportal/ENqrnyJypJyjWzWiWjyQ.png" alt="" />
                                <div>
                                    <h1>
                                        马上一条龙
                                    </h1>
                                    <span>
                                        通过口碑码帮商家提供流量，营销
                                    <br />
                                    服务等一条龙的解决方案
                                    </span>
                                </div>
                            </div>
                        </li>

                        <li>
                            <div className={m.main1_li_div}>
                                <img src="https://gw.alipayobjects.com/zos/rmsportal/ENqrnyJypJyjWzWiWjyQ.png" alt="" />
                                <div>
                                    <h1>
                                        马上一条龙
                                    </h1>
                                    <span>
                                        通过口碑码帮商家提供流量，营销
                                    <br />
                                    服务等一条龙的解决方案
                                    </span>
                                </div>
                            </div>
                        </li>
                    </ul>
                </div>
                <div className={m.main2}>
                    <div className={m.main2_div}>
                        {/* 标题 */}
                        <div className={m.main2_div_h1}>
                            <h1>合作优势</h1>
                        </div>
                        <div className={m.main2_div_div}>
                            {/* 四分内容 */}
                            <div className={m.main2_div_div_div}>
                                <div>
                                    <img src="" alt="" />
                                </div>
                                <p>高速成长</p>
                                <span>利用平台开放能力与口碑一起高速成长</span>
                            </div>
                            <div className={m.main2_div_div_div}>
                                <div>
                                    <img src="" alt="" />
                                </div>
                                <p>高速成长</p>
                                <span>利用平台开放能力与口碑一起高速成长</span>
                            </div>
                            <div className={m.main2_div_div_div}>
                                <div>
                                    <img src="" alt="" />
                                </div>
                                <p>高速成长</p>
                                <span>利用平台开放能力与口碑一起高速成长</span>
                            </div>
                            <div className={m.main2_div_div_div}>
                                <div>
                                    <img src="" alt="" />
                                </div>
                                <p>高速成长</p>
                                <span>利用平台开放能力与口碑一起高速成长</span>
                            </div>
                        </div>
                    </div>
                </div>
                {/* 接入的box */}
                <div className={m.main3}>
                {/* 里面的内容 */}
                    <div className={m.main3_div}>
                        <div classNameName={m.main3_div_h1}>
                            <h1>接入流程</h1>
                        </div>
                        {/* 最底下的内容 */}
                        <div className={m.main3_div_div}>
                            <ul>
                                <li>
                                    <img src="https://zos.alipayobjects.com/rmsportal/wheebjzSmxsWFRVTdOaf.png" alt=""/>
                                    <h4>注册入住</h4>
                                </li>
                                <li>
                                    <img src="" alt=""/>
                                    <h4>创建应用</h4>
                                </li>
                                <li>
                                    <img src="https://zos.alipayobjects.com/rmsportal/QqrMFYfRVvwzPODlMOku.png" alt=""/>
                                    <h4>服务发布</h4>
                                </li>
                                <li>
                                    <img src="https://zos.alipayobjects.com/rmsportal/MdSLdGsktMQTBMSbitnA.png" alt=""/>
                                    <h4>服务器管理</h4>
                                </li>
                            </ul>
                            <div>
                                <p>立即加入</p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    }
}
export default App